<template>
  <div>
    <el-dialog
      :visible="true"
      :title="title"
      custom-class="reply_dialog"
      width="40%"
      :before-close="callOf"
    >
      <el-form
        ref="formReply"
        :model="replyForms"
        :rules="formrules"
        label-width="100px"
      >
        <el-form-item label="项目" prop="project">
          <el-input
            ref="project"
            v-model="replyForms.project"
            class="add"
            placeholder="请输入项目名称"
          />
        </el-form-item>
        <el-form-item label="产品版本" prop="pversion">
          <el-input
            ref="pversion"
            v-model="replyForms.pversion"
            class="add"
            placeholder="请输入产品版本"
          />
        </el-form-item>

        <div />
        <el-form-item label="平台" prop="platform">
          <el-select
            v-model="replyForms.platform"
            class="add"
            multiple
            placeholder="请选择平台"
            style="width: 100%"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="mantis地址" prop="mantis_adress">
          <el-input
            ref="mantis_adress"
            v-model="replyForms.mantis_adress"
            class="add"
            placeholder="请输入mantis地址"
            type="textarea"
          />
        </el-form-item>
        <!-- <el-form-item label="备注" prop="remarks">
          <el-input
            ref="remarks"
            v-model="replyForms.remarks"
            class="add"
            placeholder="请输入备注"
            type="textarea"
          />
        </el-form-item> -->
        <el-form-item label="主送" prop="addressee">
          <el-select
            v-model="replyForms.addressee"
            class="add"
            multiple
            filterable
            placeholder="请选择主送人（支持模糊搜索）"
            style="width: 100%"
          >
            <el-option
              v-for="item in mainOptions"
              :key="item.username"
              :label="`${item.username}-${item.email}`"
              :value="item.email"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="抄送" prop="cc">
          <el-select
            v-model="replyForms.cc"
            class="add"
            multiple
            filterable
            placeholder="请选择抄送人（支持模糊搜索）"
            style="width: 100%"
          >
            <el-option
              v-for="item in ccOptions"
              :key="item.username"
              :label="`${item.username}-${item.email}`"
              :value="item.email"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="dialogReplyFormEdit('formReply')"
          >保存</el-button>
          <el-button
            type="primary"
            @click="callOf('formReply')"
          >取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { updateReplyTest } from '@/api/quality'
import axios from 'axios'

export default {
  name: 'Task',
  props: {
    // dialogAdd: Object,
    replyForms: {
      type: Object,
      required: true
    },
    edit: Boolean,
    title: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      projectOptions: [],
      typeOptions: [
        { value: 'App', label: 'App' },
        { value: 'PC', label: 'PC' },
        { value: 'M', label: 'M站' },
        { value: '微信', label: '微信' }
      ],
      mainOptions: [],
      ccOptions: [],
      formrules: {
        project: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        pversion: [
          { required: true, message: '产品版本不能为空', trigger: 'blur' }
        ],
        platform: [
          { required: true, message: '平台不能为空', trigger: 'blur' }
        ],
        mantis_adress: [
          { required: true, message: 'mantis地址不能为空', trigger: 'blur' }
        ],
        case_value: [
          { required: true, message: 'yapi/git地址不能为空', trigger: 'blur' }
        ],
        addressee: [
          { required: true, message: '主送不能为空', trigger: 'blur' }
        ],
        cc: [
          { required: true, message: '抄送不能为空', trigger: 'blur' }
        ]
      }
      // pattern: new RegExp(
      //   "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"
      // )
    }
  },
  mounted() {
    axios
      .get('http://connection.360che.com/server/admin.php/ApiData/UserInfo')
      .then((response) => {
        this.mainOptions = response.data.data
        this.ccOptions = response.data.data
        this.mainOptions.push({ 'email': 'qa-group@360che.com', 'username': '项目测试部' }, { 'email': 'app-gp@360che.com', 'username': 'APP邮件组' },
          { 'email': 'bigdata-gp@360che.com', 'username': '大数据邮件组' }, { 'email': 'shangxian-gp@360che.com', 'username': '项目上线通知' })
      }
      )
  },
  methods: {
    dialogReplyFormEdit(formReply) {
      this.$refs[formReply].validate((valid) => {
        if (valid) {
          console.log(this.replyForms)
          updateReplyTest(this.replyForms).then((res) => {
            if (res.code === 20000) {
              Message.success(res.message)
            } else {
              Message.error(res.message)
            }
            this.callOf()
            this.$parent.getList()
          })
        } else {
          return false
        }
      })
    },
    callOf() {
      this.$emit('closePop')
    }
  }
}
</script>
<style scoped>
/*.add {
  width: 100%;
}*/
/deep/.reply_dialog .el-dialog__body {
  max-height: 600px;
  overflow: auto;
}
</style>
